<template>
    <div class="tab-bar-item row">
        <div class="icon">
            <img
                v-show="!active"
                :src="require(`@/assets/tabBarIcon/${item.icon}.png`)"
            />
            <img
                v-show="active"
                :src="require(`@/assets/tabBarIcon/${item.activeIcon}.png`)"
            />
        </div>
        <!-- <div class="title" :class="{ 'title-active': active === true }">
            {{ item.title }}
        </div> -->
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
        active: {
            type: Boolean,
            default: false
        }
    },

    data() {
        return {
            msg: ""
        };
    },

    computed: {
        fontColor() {
            return this.active ? "#FFD101" : "#4e4e4";
        }
    },

    methods: {}
};
</script>


<style lang="less" scoped>
.tab-bar-item {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
        font-size: 0;
        align-items: center;
        img {
            width: 50px;
        }
    }

    .title {
        color: #666;
        font-size: 26px;
    }
    .title-active {
        font-weight: 700;
        color: #666;
    }
}
</style>